<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Flying hormone" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/media.css" />
        <link rel="stylesheet" href="../css/mui.min.css" />
        <link rel="stylesheet" href="../css/head_foot.css" />
        <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../js/jquery.Query.js" ></script>
        <script type="text/javascript" src="../js/jquery-cookie.js"></script>
        <script type="text/javascript" src="../js/mui.min.js"></script>
        <script type="text/javascript" src="../js/appcan.js"></script>
        <script type="text/javascript" src="../js/appcan.control.js"></script>
        <script type="text/javascript" src="../js/common.js" ></script>
        <link rel="stylesheet" href="../js/webuploader/webuploader.css" />
        <script type="text/javascript" src="../js/webuploader/webuploader.js" ></script>
		<title>同城搜详情</title>
		<style>
            
            .quyu{ position: relative;}
            .quyu select{ background: none; margin-bottom: 0; }
            .xiangxia{ position: absolute; top: 0.625em; right: 0.625em; z-index: -100; }
            .tu_2 img{
                width: 100%;
                padding: 0.625em 1em;
                background: #fff;
            }
            .mui-table-view-cell>a:not(.mui-btn){ width: 65%; float: left; line-height: 1.2em;}
            
            .mui-table-view-cell>p{ width: 35%; float: right; text-align: right; line-height: 2.5em;}
            .mui-icon{ font-size: 1em;}
            .mui-table-view .mui-media-object.mui-pull-left{ border-radius: 50%; width: 3em; height: 3em; max-width: 3em; line-height: inherit;}
            
            .xiangxi{ padding: 0.8em; }
            .xiangxi p{ padding-bottom: 1em;}
            .xiangxi p:first-child{ text-indent: 1.25em; font-size: 0.9em;}
            .xiangxi p:last-child{ font-size: 0.9em; text-align: right; margin-right: 1.25em; color: #ccc;}
            footer a{ margin: 0 0.625em;}
            footer .mui-bar-tab{ height: 2.5em;}
            footer .mui-bar .mui-icon{ font-size: 2em; margin: 5px;float: left; }
            input[type="text"]{ 
				width: 60%;
                margin-bottom: 0;
                padding: 0;
                height: auto;
               	line-height: 2em;
                font-size: 1em;
                margin-top: 0.15em;}
            input[type="button"]{ 
                    float: right;    
                    margin-top: 0.4em;
                    margin-right: 0.625em;
                    font-size: 1em; 
                    border: 1px solid #ff3366;
                    background-color: #ff3366;
            }
            @media screen and (max-width: 340px) {
                footer a, input[type="button"], input[type="text"]{ margin: 0;}
                input[type="submit"]{ margin-top: 0.625em;}
            }
            @media screen and (max-width: 380px) {
                input[type="text"]{ width: 50%;}
            }
			.rightright{
                margin-top: 0.75em;
            }
            .imghezi{
                width: 100%;
                height: 3em;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            .imghezi img{ height: 3em; margin-right: 0.5em; width: 18%;}
            .webuploader-pick{
                display: block;
                background: url(../img/jiajia.png) no-repeat;
                background-size: auto 100%;
                height: 1.5em;
                width: 1.5em;
                float: left;
                margin:0.5em;
            }
            
            .same_city_search .mui-table-view-cell{ padding: 0.5em 1em;}
            .mui-media-body p{ font-size: 0.8em;}
            .huida i{position: absolute; top: 0.625em; right: 0.625em; font-style: normal; color: #999; border: 1px solid #ccc; padding: 0 0.375em; line-height: 1em; border-radius: 0.3125em;}
            .huida div>img{ width: 22%; height: 3em;}
            .huida p{ margin-bottom: 0.3125em;}
            .mui-table-view .mui-media-body{
                line-height: 1em;
            }
            .mui-table-view .mui-media-object {
                line-height: 3em;
                max-width: 3em;
                width: 3em;
                height: 3em;
                border-radius: 0.625em;
            }
            .mui-table-view .mui-media-object.mui-pull-left {
                margin-right: 0.5em;
            }
            .same_city_search .mui-table-view .mui-media-object {
                margin-right: 0.5em;
            }
            .list_d{
                border-bottom: 1px solid #333;
                background-color: #fff;
            }
            .list_d li {
                border-bottom: 1px solid #ddd;
            }
        </style>
	</head>

	<body>
		<header>
			<a><span class="leftleft"></span></a>
			<h1>同城搜详情</h1>
		</header>
		<section>
			<ul class="list_d" id="msgInfo">
			</ul>
		</section>
		<section class="huida">
            <div>
                <ul class="mui-table-view" id="myMsgReviewList">
                </ul>
            </div>
        </section>
		<footer>
			<div class="mui-bar mui-bar-tab">
			    <div id="filePicker"></div>
			    <input type="text" value="" id="msg"/>
			    <input type="button" id="addMsg" value="回复"/>
			    <div class="imghezi" style="display: none;">
			        <div id="msg_pic" style="display: flex;">
                        <img style="" src="" data-src=""/>
                        <img style="" src="" data-src=""/>
                        <img style="" src="" data-src=""/>
                        <img style="" src="" data-src=""/>
                        <img style="" src="" data-src=""/>
                    </div>
                </div>
			</div>
		</footer>
        <script>
            var msgId = getVal("msgId");
            $(function(){
                $("#filePicker").click(function(){
                    $(".imghezi").show();
                });
                // 初始化Web Uploader
                var uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    auto: true,
                    // swf文件路径
                    swf: '../js/webuploader/Uploader.swf',
                    // 文件接收服务端。
                    server: host+"/image/uploadImg.json?userId="+appcan.locStorage.getVal("userId"),
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#filePicker',
                    duplicate : true,
                    compress :{
                        width: 750,
                        height: 300,
                        // 图片质量，只有type为`image/jpeg`的时候才有效。
                        quality: 90,
                        // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                        allowMagnify: false,
                        // 是否允许裁剪。
                        crop: false,
                        // 是否保留头部meta信息。
                        preserveHeaders: true,
                        // 如果发现压缩后文件大小比原来还大，则使用原来图片
                        // 此属性可能会影响图片自动纠正功能
                        noCompressIfLarger: false,
                        // 单位字节，如果图片大小小于此值，不会采用压缩。
                        compressSize: 0
                    },
                    // 只允许选择图片文件。
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });
                
                var i = 0;
                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                uploader.on('uploadSuccess', function(file, dataResult) {
                    if(i>4){
                        alert("最大上传五个");
                        return false;
                    }
                    $("#msg_pic img").eq(i).attr("src", hostIp+dataResult.data.imgUrl);
                    $("#msg_pic img").eq(i).attr("data-src", dataResult.data.imgUrl);
                    i++;
                });
                
                uploader.on('uploadError', function(file, reason){
                    if(reason=="F_EXCEED_SIZE"){
                        alert("文件大小不能超过2M");
                    }
                })
                // 文件上传过程中创建进度条实时显示。
                uploader.on( 'uploadProgress', function( file, percentage ) {
                    var percent = (percentage * 100).toFixed(2);
                    if(percent!=100){
                        $(".webuploader-pick").html("正在上传，进度"+percent+"%");
                        $("#filePicker input[name='file']").attr("disabled","disabled");
                    }else{
                        $(".webuploader-pick").html("");
                        $("#filePicker input[name='file']").removeAttr("disabled");
                    }
                });
                
                appcan.ajax({
                    type:"post",
                    url:host+"/getMsg.json?msgId="+msgId,
                    data:'',
                    dataType:"json",
                    contentType: "application/json",
                    success : function(dataResult) {
                        var data = dataResult.data;
                        var msgStr = "";
                        if(data!=null){
                            msgStr +='<li>';
                            msgStr +='<a href="javascript:;">';
                            msgStr +='<div>';
                            msgStr +='<img src="'+hostIp+data.picUrl+'">';
                            msgStr +='</div>';
                            msgStr +='<div>';
                            msgStr +='<p>'+data.cardName+'</p>';
                            msgStr +='<h3>'+data.title+'</h3>';
                            msgStr +='</div>';
                            msgStr +='</a>';
                            msgStr +='<a><i>已有'+data.reviewCount+'个回答</i></a>';
                            msgStr +='</li>';
                            if(!!data.msgPic){
                                var msgPics = data.msgPic.split(",");
                                for (var j=0; j < msgPics.length; j++) {
                                  if(j==0)msgStr+='<li>';
                                  msgStr +='<img style="width: 18%;height: 3em;" src="'+hostIp+msgPics[j]+'"/> ';
                                  if(j==msgPics.length-1)msgStr+='</li>';
                                };
                            }
                            msgStr +='<div class="xiangxi">';
                            msgStr +='<p style="color: #232323;font-size: 0.95em;">'+data.remark+'</p>';
                            msgStr +='<p>需求地址：'+data.region+'  '+data.createTime+'</p>';
                            msgStr +='</div>';
                        }
                        $("#msgInfo").html(msgStr);
                    }
                })
                
                //回复列表
                appcan.ajax({
                    type:"post",
                    async:false,       
                    url:host+"/getMsgReview.json?msgId="+msgId,
                    data:"",
                    dataType:"json",
                    contentType: "application/json",
                    success : function(dataResult) {
                        var dataList = dataResult.data;
                        var msgReviewStr = "";
                        if(dataList.length>0){
                            for(var i=0;i<dataList.length;i++){
                                msgReviewStr +='<li class="mui-table-view-cell mui-media">';
                                msgReviewStr +='<img class="mui-media-object mui-pull-left" src="'+hostIp+dataList[i].picUrl+'">';
                                msgReviewStr +='<div class="mui-media-body">';
                                msgReviewStr +='<p class="mui-ellipsis">'+dataList[i].cardName+'</p>';
                                msgReviewStr +='<p style="color: #232323;font-size: 0.95em;" class="mui-ellipsis">'+dataList[i].remark+'</p>';
                                msgReviewStr +='<i class="cardInfo" data-id='+dataList[i].cardId+'>查看名片</i>';
                                msgReviewStr +='<div>';
                                if(!!dataList[i].msgPic && dataList[i].msgPic.length > 0){
                                    var msgPics = dataList[i].msgPic.split(",");
                                    for (var j=0; j < msgPics.length; j++) {
                                      msgReviewStr +='<img src="'+hostIp+msgPics[j]+'"/> ';
                                    };
                                }
                                msgReviewStr +='</div>';
                                msgReviewStr +='</div>';
                                msgReviewStr +='</li>';
                            }
                        }
                        $("#myMsgReviewList").html(msgReviewStr);
                    }
                });
                
                $(".cardInfo").click(function(){
                    var cardId = $(this).attr("data-id");
                    openUrl('../page/cardxiangqing.html?cardId='+cardId,'cardxiangqing');
                })
                
                //添加信息
                $("#addMsg").click(function(){
                    if(!!!appcan.locStorage.getVal("userId")){
                        if(confirm("请登录")){
                            openUrl('../login/login2.html','login2')
                        }
                        return false;
                    }
                    if(!!!$("#msg").val()){
                        alert("回复内容不能为空！");
                        return false;
                    }
                    var msgPics = "";
                    for (var i=0; i < $("#msg_pic img").length; i++) {
                        if($("#msg_pic img").eq(i).attr("data-src").length>0){
                            msgPics += ((msgPics.length>0 ? "," : "") + $("#msg_pic img").eq(i).attr("data-src"));
                        }
                    };
                    var msg = "添加成功！";
                    //获取默认名片夹
                   appcan.ajax({
                       type:"get",     
                       url:host+"/getCardList.json?userId="+appcan.locStorage.getVal("userId"),
                       dataType:"json",
                       contentType: "application/json",
                       success : function(dataResult) {
                           var data = dataResult.data;
                           var cardId = "";
                            if(data.length > 0){
                                cardId = data[0].id;
                            }else{
                                if(confirm("请先添加名片")){
                                    openUrl("../user/my_card.html","my_card");
                                }
                                return false;
                            }
                            var baseParam = {'msgId':msgId,"userId":appcan.locStorage.getVal("userId"),"cardId":cardId, "remark":$("#msg").val(),"msgPic":msgPics};
                            var param = {param:baseParam};
                            appcan.ajax({
                               type:"post",
                               url:host+"/addMsgReview.json",
                               data:JSON.stringify(param),
                               dataType:"json",
                               contentType: "application/json",
                               success : function(dataResult) {
                                    openUrl("info_msg.html?msgId="+msgId,"info_msg");
                               }
                           })
                       }
                   })
                })
            })
        </script>
	</body>

</html>